<template>
  <view class="container">
    <view class="info-card">
      <view class="info-row" v-for="(value, key) in scoreInfo" :key="key">
        <text class="label">{{ labels[key] }}</text>
        <text class="value">{{ value }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scoreInfo: {
        violationTime: "道路普通货物运输",
        personnel: "道路普通货物运输",
        idNumber: "荆门420881206832",
        caseNumber: "2019-07-03",
        violationContent: "钟祥市交通运输局",
        penaltyClause: "樊世合",
        penaltyValue: "010-12345677",
        status: "010-12345677",
      },
      labels: {
        violationTime: "违章时间",
        personnel: "从业人员",
        idNumber: "身份证号",
        caseNumber: "档案编号",
        violationContent: "违章内容",
        penaltyClause: "记分条款",
        penaltyValue: "记分值",
        status: "状态",
      },
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  padding: 10px;
  background-color: #f3f6fa;
  box-sizing: border-box;
}
.info-card {
  background-color: #fff;
  border-radius: 4px;

  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    padding: 0 10px;
  }

  .label {
    color: #79829c;
    font-size: 16px;
    line-height: 1.5;
  }

  .value {
    color: #0d1444;
    font-size: 16px;
  }
}
</style>
